<template>
	<router-view>
		<template #default="{ Component, route }">
			<transition
				:name="
					getTransitionName({
						route,
						openCache,
						enableTransition: getEnableTransition,
						cacheTabs: getCaches,
						def: getBasicTransition,
					})
				"
				mode="out-in"
				appear
			>
				<keep-alive v-if="openCache" :include="getCaches">
					<component :is="Component" :key="route.fullPath" />
				</keep-alive>
				<component v-else :is="Component" :key="route.fullPath" />
			</transition>
		</template>
	</router-view>
	<FrameLayout v-if="getCanEmbedIFramePage" />
</template>

<script lang="ts">
import { computed, defineComponent, unref } from 'vue';

import FrameLayout from '../iframe/index.vue';

import { useRootSetting } from '@/hooks/setting/useRootSetting';

import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { getTransitionName } from './transition';

import { useMultipleTabStore } from '@/store/modules/multipleTab';

export default defineComponent({
	name: 'PageLayout',
	components: { FrameLayout },
	setup() {
		const { getShowMultipleTab } = useMultipleTabSetting();
		const tabStore = useMultipleTabStore();

		const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();

		const { getBasicTransition, getEnableTransition } = useTransitionSetting();

		const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));

		const getCaches = computed((): string[] => {
			if (!unref(getOpenKeepAlive)) {
				return [];
			}
			return tabStore.getCachedTabList;
		});

		return {
			getTransitionName,
			openCache,
			getEnableTransition,
			getBasicTransition,
			getCaches,
			getCanEmbedIFramePage,
		};
	},
});
</script>
